<template>
    <view class="upload-receipt">
        <view class="title">请拍摄并上传您的销售小票</view>
        <view class="img-cell">
            <view>
                <view class="add-img" @tap="chooseImage">
                    <uni-icons type="camera" size="80"></uni-icons>
                    <text>添加图片</text>
                </view>
            </view>
            <block v-for="(image, index) in imageList" :key="index">
                <view class="img-item">
                    <image class="img" :src="easyGetImgUrl(image)" @click="previewImage(index)"></image>
                    <view @click="del(index)">
                        <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"> </uni-icons>
                    </view>
                </view>
            </block>
        </view>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
import { uploadImage } from "@/service/api/file.js"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import permision from "@/utils/permission.js"
export default {
	components: {
		privacyAgreement
	},
    data() {
        return {
            imageList: [],
        }
    },
    methods: {
        //选择图片
		//#ifdef APP
		async chooseImage(type) {
			const result = await permision.premissionCheck("EXTERNAL_STORAGE")
			if(result == 1) {  
			    // 此处处理各自业务 如：uni.chooseImage  
				let that = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ["album", "camera"], //从相册选择
				    success: function (res) {
				        that.upLoadPicFn(res)
				    },
					fail(e) {
						console.log(e)
					}
				})
			}
		},
		//#endif
		// #ifndef APP
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], //从相册选择
                success: function (res) {
                    that.upLoadPicFn(res)
                },
				fail(e) {
					console.log(e)
				}
            })
        },
		// #endif
        //删除图片
        del(index) {
            this.imageList.splice(index, 1)
			this.$emit('imageList',this.imageList)
        },
        //上传图片
        upLoadPicFn(files) {
            let param = {
                filePath: files.tempFilePaths[0],
                formData: {},
            }
            uploadImage(param).then((e) => {
                if (e.Data) {
                    this.imageList.push(e.Data.FullPath)
					this.$emit('imageList',this.imageList)
                }
            })
        },
        //预览图片
        previewImage(index) {
            uni.previewImage({
                current: index,
                urls: this.imageList,
                loop: true,
            })
        },
    },
}
</script>

<style lang="scss">
.upload-receipt {
    margin: 24rpx;
    padding: 24rpx;
    padding-bottom: 0;
    background-color: $color-white;
    border-radius: 16rpx;
	position: relative;
    .title {
        margin-bottom: 38rpx;
        font-size: 28rpx;
        font-weight: 700;
    }

    .img-cell {
        margin-bottom: 0;
    }
}
</style>
